<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<h3 style="text-align: center">订单表</h3>
<div class="layui-fluid">
<table id="demo" lay-filter="test"></table>
</div>
<script src="/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">预订取消</a>
</script>
<script src="/js/jquery-2.1.0.min.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/user-book-list' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                    {field: 'custID', title: 'custID', fixed: 'left',width:80}
                    ,{field: 'custNum', title: '身份号'}
                    ,{field: 'custPhone', title: '电话'}
                    ,{field: 'out_trade_no', title: '订单号'}
                    ,{field: 'bookState', title: '状态',width:80,templet: function (d){
                        if(d.bookState==0){
                            return "待处理"
                        }
                        if (d.bookState==1){
                            return "未入住"
                        }
                        if (d.bookState==2){
                            return "已入住"
                        }
                        if (d.bookState==3){
                            return "已退房"
                        }
                    }}
                    ,{field: 'createTime', title: '下单时间'}
                    ,{field: 'money', title: '金额',width:80}
                    ,{field: 'remark', title: '备注'}
                    ,{fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'}
                ]
            ]
            ,limit:5 //一页显示多少条
            ,limits:[5,10,15]//每页条数的选择项
            ,groups: 2 //只显示 2 个连续页码
            ,first: "首页" //不显示首页
            ,last: "尾页" //不显示尾页
        });
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                if (data.bookState==0||data.bookState==1){
                    layer.confirm('真的退订订单号为：'+data.out_trade_no+"的订单吗?", function(index){

                        //console.log(data.p_id);
                        //向服务端发送删除指令
                        $.ajax({
                            url:'/user-deletebook',
                            type:'get',
                            data:{'out_trade_no':data.out_trade_no},//向服务端发送删除的id
                            success:function(data){
                                if(data!=null){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("退订成功",{icon:1});
                                }
                                else{
                                    layer.msg("退订失败",{icon:5});
                                }
                            }
                        });
                        layer.close(index);
                    });
                }else {
                    layer.msg("您已入住或退房，无法取消预订",{icon:5});

                }


               // });
            }
        });
    });

</script>
</body>
</html>
